<template>
<!--  智能找商品-目前弃用 -->
  <div id="lzl">
    <!-- 2.搜索商品 -->

    <div class="showDiv02">
      <img src="@/assets/li/top01.png" alt class="talentBanner" />
      <div class="top02">
        <img src="@/assets/li/top03.png" alt class="goodsIcon" />
      </div>
      <div class="showGoods" v-if="boxShow != true">
        <div class="topBox">
          <div>
            <div data-v-378b4e67 class="notice-box"></div>
            匹配商品
          </div>
          <span class="history" @click="history"
            >查看历史匹配记录<img src="@/assets/li/more.png" />
          </span>
        </div>

        <div
          style="
            font-size: 14px;
            color: #888;
            margin-top: 20px;
            font-weight: 500;
          "
        >
          <!-- <div>请选择将要带货的商品特征 :</div> -->
        </div>

        <div class="kind kind_box">
          <div class="kind1">商品类目</div>
          <div class="block">
            <el-cascader
              :options="options"
              :show-all-levels="true"
              :props="props"
              @change="handleSubCat"
              v-model="subCatValue"
              :key="cascaderKey"
              @visible-change="showList"
              placeholder="请选择品类"
              :class="{ active: isActive }"
            ></el-cascader>
          </div>
          <span class="more" v-if="!isShow">（*必选）</span>
          <p class="errText02" v-if="isShow">*最多可选择5个分类</p>
        </div>
        <div class="kind" :class="[showListRoot ? 'p1' : 'p2']">
          <div class="kind1">商品单价</div>
          <label :class="{ unlimited_isChecked: isCheckAll }">
            <input
              type="checkbox"
              v-model="isCheckAll"
              @change="handler"
              value="不限"
              id="unlimited"
              class="unlimited"
            />
            <span class="openEnded">不限</span>
          </label>
          <label
            v-for="(item, index) in cartData1"
            :key="index"
            :class="{ unlimited_isChecked: item.isChecked }"
          >
            <input
              type="checkbox"
              :value="item"
              v-model="checkedArr"
              @change="isCheckedAll(item)"
            />
            <span class="price_01">{{ item.name }}</span>
          </label>
          <span class="more">（*多选）</span>
        </div>
        <p class="errText" v-if="isText">*最多可选择3个单价</p>
        <div class="kind">
          <div class="kind1">佣金利率</div>
          <label :class="{ unlimited_isChecked: iscommissionAll }">
            <input
              type="checkbox"
              v-model="iscommissionAll"
              @change="handler01"
              value="不限"
              id="commission01"
              class="unlimited"
            />
            <span class="openEnded">不限</span>
          </label>
          <label
            v-for="(item, index) in commission1"
            :key="index"
            :class="{ unlimited_isChecked: item.isChecked }"
          >
            <input
              type="checkbox"
              :value="item"
              v-model="commissionArr"
              @change="isCommission(item)"
            />
            <span class="price">{{ item.name }}</span>
          </label>
          <span class="more">（*多选）</span>
        </div>
        <p class="errText" v-if="isText02">*最多可选择3个佣金范围</p>
        <!-- 搜索结果 -->
        <div class="searchResult">
          <div class="optionBtnBox">
            <button @click="back">上一步</button>
            <button class="noMatching" v-if="ProIdValue.length < 3">
              智能匹配
            </button>
            <button
              @click="toMatch"
              class="matching"
              v-if="ProIdValue.length > 2"
            >
              智能匹配
            </button>
            <button @click="sample" class="example">查看实例</button>
          </div>
        </div>
      </div>
      <!-- 剩余次数 -->
      <el-dialog
        :visible.sync="useCountPop"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="400px"
      >
        <div class="useCountBox">
          <p class="text01">{{ vipName }}每月可使用{{ numberofvisits }}次</p>
          <p class="text02">
            当前已使用
            <span>{{ numberofvisits - surplusCount }}次</span>，剩余
            <span>{{ surplusCount }}次</span>，
          </p>
          <p class="text03">
            本次查询将消耗
            <span>1次</span>机会，确认查询吗？
          </p>
          <div class="optionBox">
            <button
              class="upgradeBtn"
              v-if="surplusCount == 0 && isMaxVip == false"
              @click="toBuy"
            >
              升级会员
            </button>
            <el-popover placement="bottom" trigger="hover">
              <div class="message_content">
                <div class="popper_arrow"></div>
                <img src="@/assets/img/xiaozhushou_qr.jpg" />
                <div>工作日：9:30--18:30</div>
              </div>
              <button
                class="upgradeBtn"
                v-if="surplusCount == 0 && isMaxVip == true"
                slot="reference"
              >
                联系客服
              </button>
            </el-popover>
            <button
              class="upgradeBtn"
              v-if="surplusCount > 0"
              @click="
                useCountPop = false;
                boxShow = true;
                getGoodId();
              "
            >
              确定
            </button>
            <button
              class="cancelBtn"
              v-if="surplusCount > 0"
              @click="useCountPop = false"
            >
              取消
            </button>
            <button
              class="cancelBtn"
              v-if="surplusCount == 0"
              @click="useCountPop = false"
            >
              取消
            </button>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="boxShow" v-if="boxShow">
      <div class="boxShow_02">
        <div
          v-loading="showLoading1"
          class="showLoading1"
          element-loading-spinner="el-icon-loading"
        ></div>
        正在为您匹配中，请于3分钟后在历史匹配记录 中查看匹配结果
      </div>
      <button class="matching02" @click="history()">我知道了</button>
    </div>
  </div>
</template>

<script>
var cartData = [
  {
    id: 1,
    name: "0-50元",
    isChecked: false
  },
  {
    id: 2,
    name: "50-100元",
    isChecked: false
  },
  {
    id: 3,
    name: "100-150元",
    isChecked: false
  },

  {
    id: 4,
    name: "150-200元",
    isChecked: false
  },
  {
    id: 5,
    name: "200-300元",
    isChecked: false
  },
  {
    id: 6,
    name: "300-500元",
    isChecked: false
  },
  {
    id: 7,
    name: "500元以上",
    isChecked: false
  }
];
var commission = [
  {
    id: 1,
    name: "0-5%",
    isChecked: false
  },
  {
    id: 2,
    name: "5%-10%",
    isChecked: false
  },
  {
    id: 3,
    name: "10%-15%",
    isChecked: false
  },

  {
    id: 4,
    name: "15%-20%",
    isChecked: false
  },
  {
    id: 5,
    name: "20%以上",
    isChecked: false
  }
];
export default {
  data() {
    return {
      showLoading1: true,
      //品类
      options: [],
      props: {
        multiple: true,
        label: "categoryName",
        children: "sublist",
        value: "id"
      },
      cascaderKey: "0",
      subCatValue: "",
      showListRoot: "",
      isShow: false,
      // 单价选中的元素集合
      cartData1: cartData,
      checkedArr: [],
      isCheckAll: true,
      isText: false,
      //佣金利率
      commission1: commission,
      commissionArr: [],
      iscommissionAll: true,
      isText02: false,
      //选中的二级菜单
      menu: [],
      numberofvisits: 0, //总次数
      surplusCount: 0, //剩余次数
      vipName: "",
      isMaxVip: Boolean, //是否是最高级别的会员
      useCountPop: false,
      price: [],
      Rate: [],
      proId: [],
      matchLoading: false,
      value01: "",
      ProIdValue: "",
      boxShow: false,
      isActive: false
    };
  },
  computed: {
    changeData() {
      const {
        isCheckAll,
        checkedArr,
        commissionArr,
        iscommissionAll,
        subCatValue,
        ProIdValue
      } = this;
      return {
        isCheckAll,
        checkedArr,
        commissionArr,
        iscommissionAll,
        subCatValue,
        ProIdValue
      };
    }
  },
  watch: {
    changeMenu() {
      ++this.cascaderKey;
    },
    isCheckAll() {
      document.getElementById("unlimited").onclick = function() {
        unlimited.checked = true;
      };
    },
    iscommissionAll() {
      document.getElementById("commission01").onclick = function() {
        commission01.checked = true;
      };
    },

    changeData() {
      this.parameter();
      this.ProIdValue = window.localStorage.getItem("ProId");
    },
    subCatValue(value) {
      if (value.length > 0) {
        this.isActive = true;
      } else {
        this.isActive = false;
      }
      if (value.length > 5) {
        this.subCatValue = value.splice(0, 5);
      }
    }
  },
  created() {
    //this.matching();
    document.title = "智能找商品&智能分析服务平台-掌上精选";
    this.options = this.$store.state.goodsKindArrNew.slice(1);
  },
  mounted() {
    this.parameter();
  },
  beforeDestroy() {
    this.handler(), this.handler01();
    window.localStorage.removeItem("ProId");
  },
  methods: {
    //次数
    toMatch() {
      let that = this;
      that.$axios
        .get("/api/customer/GetNumberofvisitsDetailed", {
          params: {
            API: "/api/intelligent/authormatching" //要访问的接口地址
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            // 0是不限制次数
            if (res.data.data.numberofvisits > 0) {
              that.numberofvisits = res.data.data.numberofvisits; //限制次数
              that.vipName = res.data.data.vipName; //vipname
              that.surplusCount = res.data.data.surplusCount; //剩余次数
              that.isMaxVip = res.data.data.isMaxVip; //是否是最高级别的会员
              that.useCountPop = true;
            } else {
              that.productmatch();
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //二级菜单
    handleSubCat(value) {
      // 获取value(id)值

      window.localStorage.setItem("ProId", JSON.stringify(value));
      this.menu = JSON.parse(window.localStorage.getItem("ProId"));

      if (this.menu.length > 5) {
        window.localStorage.setItem("ProId", JSON.stringify(value.slice(0, 5)));

        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },

    showList() {
      if (this.showListRoot == true) {
        //收起
        this.showListRoot = false;
      } else if (this.showListRoot == false) {
        //展开
        this.showListRoot = true;
        let allTag = document.querySelector(".el-cascader-menu__wrap");
        let tag = allTag.querySelectorAll(".el-checkbox");
        Array.from(tag).map((el, index) => {
          el.remove();
        });
      }
    },
    //单价不限
    handler: function() {
      this.isText = false;
      this.checkedArr.forEach(item => {
        item.isChecked = false;
      });
      this.checkedArr = [];
    },
    //佣金不限
    handler01: function() {
      this.commissionArr.forEach(item => {
        item.isChecked = false;
      });
      this.commissionArr = [];
      this.isText02 = false;
    },

    //单价多选
    isCheckedAll: function(itemObj) {
      itemObj.isChecked = !itemObj.isChecked;
      this.isCheckAll = false;
      this.checkedArr.forEach(item => {
        item.isChecked = true;
      });
      if (this.checkedArr.length > 3) {
        this.checkedArr[0].isChecked = false;
        this.checkedArr.shift();
        this.isText = true;
      } else {
        this.isText = false;
      }

      if (this.checkedArr.length == 0) {
        this.isCheckAll = true;
        this.isText = false;
        document.getElementById("unlimited").onclick = function() {
          unlimited.checked = true;
        };
      }
    },
    //佣金多选
    isCommission: function(itemObj) {
      itemObj.isChecked = !itemObj.isChecked;
      this.iscommissionAll = false;
      if (this.commissionArr.length > 3) {
        this.commissionArr[0].isChecked = false;
        this.commissionArr.shift();
        this.isText02 = true;
      } else {
        this.isText02 = false;
      }
      if (this.commissionArr.length == 0) {
        this.iscommissionAll = true;
        this.isText02 = false;
        document.getElementById("commission01").onclick = function() {
          commission01.checked = true;
        };
      }
    },
    parameter() {
      //商品单价
      let pricenum = [];
      if (this.isCheckAll == true) {
        pricenum.push(0);
      } else {
        this.checkedArr.map((item, index) => {
          if (item.name == "0-50元") {
            pricenum.push(1);
          } else if (item.name == "50-100元") {
            pricenum.push(2);
          } else if (item.name == "100-150元") {
            pricenum.push(3);
          } else if (item.name == "150-200元") {
            pricenum.push(4);
          } else if (item.name == "200-300元") {
            pricenum.push(5);
          } else if (item.name == "300-500元") {
            pricenum.push(6);
          } else if (item.name == "500元以上") {
            pricenum.push(7);
          }
        });
      }
      window.localStorage.setItem("pricenum", pricenum);
      //佣金率
      let interest = [];
      if (this.iscommissionAll == true) {
        interest.push(0);
      } else {
        this.commissionArr.map((item, index) => {
          if (item.name == "0-5%") {
            interest.push(1);
          } else if (item.name == "5%-10%") {
            interest.push(2);
          } else if (item.name == "10%-15%") {
            interest.push(3);
          } else if (item.name == "15%-20%") {
            interest.push(4);
          } else if (item.namem == "20%以上") {
            interest.push(5);
          }
        });
      }
      window.localStorage.setItem("commission", interest);
    },
    getGoodId() {
      this.price = [];
      this.Rate = [];
      this.price.push(window.localStorage.getItem("pricenum"));
      this.Rate.push(window.localStorage.getItem("commission"));
      this.proId = JSON.parse(window.localStorage.getItem("ProId"));

      let that = this;

      that.matchLoading = true;
      that.$axios
        .post(
          "api/intelligent/authormatching?api-version=2",

          {
            AuthorId: window.localStorage.getItem("ids"),
            Price: this.price[0],
            Rate: this.Rate[0],
            ProCategory: this.proId
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.goodsId = res.data.data.toString();
            that.time = res.data.msg;
            that.count = res.data.count;
            localStorage.setItem("goodsId", that.goodsId);
            localStorage.setItem("Uptime1", that.time);
            localStorage.setItem("goodsNum1", that.count);
            that.matchLoading = false;
            localStorage.removeItem("pageForm");
            // this.$router.push('/inAnalysis/resultList')
          } else {
            localStorage.setItem("Uptime1", "--");
            localStorage.setItem("goodsId", []);
            that.matchLoading = true;
            // this.$router.push('/inAnalysis/resultList')
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // matching() {
    //   this.$axios
    //     .get("api/product/GetProCategoriesNew")
    //     .then(res => {
    //       this.options = res.data.data.slice(1);
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },

    history() {
      this.boxShow = false;
      let router = this.$router.resolve({
        path: `/inAnalysis/historyGoods`
      });
      window.open(router.href, "_blank");
    },
    back() {
      this.$router.push("/inAnalysis/expertList");
    },
    sample() {
      let router = this.$router.resolve({
        path: `/egImg/sample`
      });
      window.open(router.href, "_blank");
    },
    // 升级会员
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy/0`
      });
      window.open(router.href, "_blank");
    }
  }
};
</script>
<style lang="less" scoped>
#lzl {
  //多选样式
  .unlimited {
    width: 16px;
    height: 16px;
  }

  .kind {
    height: 40px;

    label {
      display: flex;
      align-items: center;
      font-weight: 500;
      cursor: pointer;
      font-size: 14px;
      font-weight: normal;
      color: #555555;
      padding: 9px 16px;
      margin-right: 5px;
      input {
        width: 0px;
        height: 0px;
        margin-top: 2px;
        margin-right: 5px;
        visibility: hidden;
        margin: 0;
      }
    }
    .unlimited_isChecked {
      background-color: #ebf3ff;
      border-radius: 4px;
      font-size: 14px;
      font-weight: normal;
      color: #fd7f2c;
    }
    .more {
      font-size: 14px;
      font-weight: normal;

      color: #888;
    }
  }
  //以上是多选样式
  background-color: #f5f5f5;
  padding-top: 14px;
  .showDiv02 {
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    .talentBanner {
      width: 1201px;
      height: 54px;
      border-radius: 4px;
    }
    .top02 {
      width: 1201px;
      height: 81px;
      background-color: #f5f5f5;
      padding-top: 22px;
    }
    .goodsIcon {
      width: 455px;
      height: 64px;
      display: block;
      margin: auto;
    }

    .showGoods {
      width: 100%;

      background-color: #ffffff;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
      .topBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .notice-box {
          display: inline-block;
          width: 4px;
          height: 16px;
          border-radius: 100px;
          margin-right: 6px;
          background-color: #fd7f2c;
          margin-top: 1px;
        }
        > div {
          font-size: 16px;
          color: #222;
          font-weight: normal;

          display: flex;
          align-items: center;
        }
        span {
          font-size: 14px;
          color: #fd7f2c;
          cursor: pointer;
        }
      }

      // 按钮
      .optionBtnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 350px;
        margin-bottom: 35px;
        button:nth-child(1) {
          width: 115px;
          height: 40px;
          border-radius: 4px;
          border: solid 1px #fd7f2c;
          font-size: 14px;
          color: #fd7f2c;
        }
        .noMatching {
          width: 115px;
          height: 40px;
          background-color: #cfcfcf;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
          margin-left: 50px;
        }
        .matching {
          width: 115px;
          height: 40px;
          background-color: #fd7f2c;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
          margin-left: 50px;
        }
        .example {
          width: 115px;
          height: 40px;
          border-radius: 4px;
          font-size: 14px;
          color: #fd7f2c;
          margin-left: 50px;
          border: solid 1px #fd7f2c;
        }
      }
    }
  }
  .kind {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #222222;
    margin-top: 10px;
    display: flex;
    align-items: center;
    position: relative;
  }
  .kind_box {
    margin-bottom: 14px;
  }
  .kind1 {
    margin-right: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0px;
    color: #888888;
  }

  .p1 {
    margin-top: 220px;
  }
  .p2 {
    margin-top: 0;
  }
  .errText {
    width: 513px;
    margin-left: 65px;
    text-align: left;
    font-size: 14px;
    color: #ea1b0b;
    padding-left: 5px;
  }
  .errText02 {
    text-align: left;
    font-size: 14px;
    color: #ea1b0b;
    padding-left: 5px;
    font-weight: normal;
  }
  // 弹窗
  .useCountBox {
    box-sizing: border-box;
    width: 400px;
    height: 260px;
    background-color: #ffffff;
    border-radius: 4px;
    p {
      text-align: center;
      span {
        font-size: 16px;
        color: #fd7f2c;
      }
    }
    .text01 {
      font-size: 20px;
      color: #222222;
      padding-top: 43px;
    }
    .text02 {
      padding-top: 16px;
      font-size: 16px;
      color: #555555;
      line-height: 30px;
    }
    .text03 {
      font-size: 16px;
      color: #555555;
      line-height: 30px;
    }
    .optionBox {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 40px;
      .upgradeBtn {
        width: 120px;
        height: 44px;
        background-color: #fd7f2c;
        border-radius: 4px;
        font-size: 16px;
        color: #ffffff;
      }
      .cancelBtn {
        width: 120px;
        height: 44px;
        border-radius: 4px;
        border: solid 1px #fd7f2c;
        font-size: 16px;
        color: #fd7f2c;
        margin-left: 30px;
      }
    }
  }

  .matching02 {
    width: 115px;
    height: 40px;
    background-color: #fd7f2c;
    border-radius: 4px;
    font-size: 14px;
    color: #ffffff;
    margin-top: 100px;
    z-index: 68;
    position: absolute;
  }
  .boxShow {
    background-color: #ffffff;
    width: 1200px;
    height: 692px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 66;

    background-position: 0px 0px;
    font-size: 14px;
    font-weight: normal;
    color: #222222;

    &::after {
      width: 100%;
      height: 100%;
      content: "";

      background: url("../../../assets/li/goods04.png") no-repeat;
      z-index: 66;
      filter: blur(10px);
    }
    .boxShow_02 {
      z-index: 68;
      position: absolute;
    }
  }
  .active {
    margin-top: 25px;
    height: 38px;
  }
  .history {
    > img {
      width: 7px;
      height: 11px;
      margin-left: 5px;
      margin-top: -3px;
    }
  }
}
</style>
